<template>
  <div class="home">
    <my-title>登录</my-title>
    <div class="box">
      <div class="top">
        <label for="username">用户名 :</label>
        <input type="text" name="username" id="username" @input="names">
      </div>
      <div class="bottom">
        <label for="password">密码 :</label>
        <input type="password" name="password" id="password" @input="pass">
      </div>
      <button class="login" :disabled="login" @click="logins">登录</button>
      <button class="validation" v-if="user.username">验证码</button>
      <button class="validation" v-else disabled>请输入</button>
    </div>
  </div>

</template>
<script>
import myTitle from '@/components/header/titile'

export default {
  name: '',
  props: {},
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      login: true
    };
  },
  // 子组件转换
  components: {myTitle},
  // 数据引入
  mounted() {

  },
  created() {
  },
  //点击函数事件
  methods: {
    logins(){
      this.$router.push('/about')
      this.$store.commit('change',this.user.username)
      localStorage.setItem('token',this.user.username)
    },
    names(e) {
      this.user.username= e.target.value
      // console.log(e.target.value)
    },
    pass(e) {
      this.user.password= e.target.value
      // console.log(e.target.value)
    }

  },
  //计算事件
  computed: {},
  //数据监听
  watch: {
    user: {
      handler: function (newV) {
          if (newV.username && newV.password){
            console.log(newV)
            this.login = false
          }
      },
      deep: true
    }
  },
}
</script>
<style lang="scss" scoped>
.box {
  font-size: .4rem;
  height: 2rem;
  width: 75vw;
  margin: 2rem 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;

  div {
    display: flex;
    justify-content: space-around;
    text-align: right;

    label {
      width: 24vw;
    }

  }

  .login {
    margin: 0 0rem 0 1rem;
    width: 64vw;
  }

  .validation {
    position: absolute;
    right: -1.4rem;
  }
}
</style>